import { useCallback, useState } from "react";

import { Alert, Button, Col, Form, InputNumber, Modal, Radio, Row, Space, Progress, Tabs, Select, Input } from "antd";

/**
 * 
 * 
 * 交互及规则（批量操作）

1、批量生成：勾选不同选项，点击确定后会按照不同规则自动生成商品编码，不管之前有没有填写数据都会覆盖，连接符读取选择的符号。款式编码优先读取修改的款式编码，未修改则读取原款式编码，没有则按空的来

款式编码+规格：比如款式编码为A001，规格为”红色30“，选择的符号为-，则生成“A001-红色30”。其他同理，规格1即颜色；规格2即尺码；

款式编码+流水号：生成“A001-0.1”、“A001-0.2”..."A001-0.11"..."A001-0.21"

2、批量填充：限30字符，必填，否则确定时红色文字提示“不能为空”，确定后则所有商品编码会按输入数据批量修改；

按原编码填充：则会读取原商品编码

3、批量添加：限30字符，至少填写一个输入框，否则红色文字提示“请至少填写一个”。确定后，则在“修改后的商品编码”里已输入的数据里分别加入前后缀；

修改的商品编码为空，则添加失败直接跳过。

4、批量替换：原编码关键词、新编码关键词：限10字符，两个都必填，否则点击确定时字段下红色文字提示“不能为空”；

确定后，在“修改后的商品编码”里精准搜索到原编码关键词替换为新编码关键词

5、批量删除：输入关键词，必填，否则确定时红色文字提示“不能为空”，确定后精准搜索到该关键词然后删除；

全部清空，则修改后的商品编码的数据全部清空
 */
export default ({ updateTableData, className }) => {
	const [form] = Form.useForm();
	let createSkuCodeAction = (row, index) => {};

	/**
	 * 切换tab时，重置表单数据
	 */
	const handleTabsChange = useCallback(activeKey => {
		switch (activeKey) {
			case "批量生成":
				{
					form.setFieldsValue({ keyword1: "颜色规格", keyword2: "-" });
				}
				break;
			default: {
				form.setFieldsValue({ keyword1: "", keyword2: "" });
			}
		}
	});
	const limit30 = t => {
		t = String(t);
		if (t.length > 30) {
			console.warn("字符超过30位，自动截断: " + t);
			return t.substring(0, 30);
		}
		return t;
	};
	const onFinish = (TEXT, data) => {
		console.log("EditTabs onFinish", TEXT, data);

		const { keyword1, keyword2 } = data;
		switch (TEXT) {
			case "批量生成":
				{
					const linkText = keyword2 === "无" ? "" : keyword2;
					switch (keyword1) {
						case "颜色规格":
							createSkuCodeAction = row => {
								const [colorText, sizeText] = row.skuSpec.split(";");
								return {
									...row,
									skuOriginalCode2: (row.spuCode || "") + linkText + row.skuSpec
								};
							};

							break;

						// case "颜色规格":
						// 	createSkuCodeAction = row => {
						// 		const [colorText, sizeText] = row.skuSpec.split(";");
						// 		return {
						// 			...row,
						// 			skuOriginalCode2: (row.spuCode || "") + linkText + colorText
						// 		};
						// 	};

						// 	break;

						case "尺码规格":
							createSkuCodeAction = row => {
								const [colorText, sizeText] = row.skuSpec.split(";");
								return {
									...row,
									skuOriginalCode2: (row.spuCode || "") + linkText + sizeText
								};
							};
							break;

						case "流水号":
							createSkuCodeAction = (row, index) => {
								return {
									...row,
									skuOriginalCode2: (row.spuCode || "") + linkText + "0." + Number(index + 1)
								};
							};
							break;
                        case "商品编码颜色": 
                            createSkuCodeAction = (row, index) => {
								const [colorText, sizeText] = row.skuSpec.split(";");
                                return {
                                    ...row,
									skuOriginalCode2: (row.skuOriginalCode || "") + linkText + colorText
                                };
                            };
                        break;
                        case "商品编码尺码": 
                            createSkuCodeAction = (row, index) => {
                                const [colorText, sizeText] = row.skuSpec.split(";");
                                return {
                                    ...row,
                                    skuOriginalCode2: (row.skuOriginalCode || "") + linkText + sizeText
                                };
                            };
                        break;
                        case "商品编码流水号": 
                            createSkuCodeAction = (row, index) => {
                                return {
                                    ...row,
									skuOriginalCode2: (row.skuOriginalCode || "") + linkText + "0." + Number(index + 1)
                                };
                            };
                        break;
                        case "商品编码颜色规格": 
                            createSkuCodeAction = (row, index) => {
                                return {
                                    ...row,
                                    skuOriginalCode2: (row.skuOriginalCode || "") + linkText + row.skuSpec
                                };
                            };
                        break;
					}
				}

				break;
			case "批量填充":
				createSkuCodeAction = (row, index) => {
					return {
						...row,
						skuOriginalCode2: limit30(keyword1)
					};
				};
				break;
			case "填充原商品编码":
				createSkuCodeAction = (row, index) => {
					return {
						...row,
						skuOriginalCode2: limit30(row.skuOriginalCode)
					};
				};
				break;
			case "批量添加":
				createSkuCodeAction = (row, index) => {
					let txt = row.skuOriginalCode2 || "";
					if (keyword1) txt = keyword1 + txt;
					if (keyword2) txt = txt + keyword2;
					return {
						...row,
						skuOriginalCode2: limit30(txt)
					};
				};

				break;
			case "批量替换":
				createSkuCodeAction = (row, index) => {
					let txt = row.skuOriginalCode2 || "";
					return {
						...row,
						skuOriginalCode2: limit30(txt.replace(keyword1, keyword2))
					};
				};
				break;
			case "批量删除":
				createSkuCodeAction = (row, index) => {
					let txt = row.skuOriginalCode2 || "";
					return {
						...row,
						skuOriginalCode2: limit30(txt.replace(keyword1, ""))
					};
				};

				break;
			case "全部删除":
				createSkuCodeAction = (row, index) => {
					return {
						...row,
						skuOriginalCode2: ""
					};
				};
				break;
		}

		updateTableData(createSkuCodeAction);
	};

	const handleValidator = (rule, val, callback) => {
		const keyword1 = form.getFieldValue("keyword1");

		const keyword2 = form.getFieldValue("keyword2");

		if (keyword1 || keyword2) {
			callback();
		}
		callback("请至少填写一个");
	};
	return (
		<Tabs
			className={"tabs-no-border-bottom " + className}
			destroyInactiveTabPane={true}
			defaultActiveKey="1"
			onChange={handleTabsChange}
			items={[
				{
					label: `批量生成`,
					key: "批量生成",
					children: (
						<Form
							className="views-search-form"
							key="SearchFormAdd"
							form={form}
							layout="horizontal"
							onFinish={e => onFinish("批量生成", e)}
						>
							<Row gutter={16}>
								<Col>
									<Form.Item name={"keyword1"} rules={[{ required: true, message: "不能为空" }]} initialValue={"颜色规格"}>
										<Select
											options={[
												{
													value: "颜色规格",
													label: "按款式编码+颜色规格"
												},
												{
													value: "颜色规格",
													label: "按款式编码+规格1" //规格1即颜色；
												},
												{
													value: "尺码规格",
													label: "按款式编码+规格2" //规格2即尺码
												},
												{
													value: "流水号",
													label: "按款式编码+流水号"
												},
                                                {
													value: "商品编码颜色",
													label: "商品编码+规格1"
												},
                                                {
													value: "商品编码尺码",
													label: "商品编码+规格2"
												},
                                                {
													value: "商品编码流水号",
													label: "商品编码+流水号"
												},
                                                {
													value: "商品编码颜色规格",
													label: "商品编码+颜色规格"
												},
											]}
										/>
									</Form.Item>
								</Col>
								<Col>
									<Form.Item name={"keyword2"} rules={[{ required: true, message: "不能为空" }]} initialValue={"-"}>
										<Select
											style={{ width: 120 }}
											options={[
												{
													value: "-",
													label: "-"
												},
												{
													value: "+",
													label: "+"
												},
												{
													value: "无",
													label: "无连接符"
												}
											]}
										/>
									</Form.Item>
								</Col>
								<Col>
									<Button type="primary" htmlType="submit">
										生成编码
									</Button>
								</Col>
							</Row>
						</Form>
					)
				},
				{
					label: `批量填充`,
					key: "批量填充",
					children: (
						<Form
							className="views-search-form"
							key="SearchFormAdd"
							form={form}
							layout="horizontal"
							onFinish={e => onFinish("批量填充", e)}
						>
							<Row gutter={16}>
								<Col span={12}>
									<Form.Item name={"keyword1"} rules={[{ required: true, message: "不能为空" }]}>
										<Input placeholder="请输入需要填充的商品编码" maxLength={30} />
									</Form.Item>
								</Col>
								<Col>
									<Button type="primary" htmlType="submit">
										确定
									</Button>
								</Col>
								<Col>
									<Button type="default" onClick={() => onFinish("填充原商品编码", form.getFieldsValue())}>
										填充原商品编码
									</Button>
								</Col>
							</Row>
						</Form>
					)
				},
				{
					label: `批量添加`,
					key: "批量添加",
					children: (
						<Form
							className="views-search-form"
							key="SearchFormAdd"
							form={form}
							layout="horizontal"
							onFinish={e => onFinish("批量添加", e)}
						>
							<Row gutter={16}>
								<Col>
									<Form.Item name={"keyword1"} rules={[{ validator: handleValidator }]}>
										<Input placeholder="请输入前缀" maxLength={30} />
									</Form.Item>
								</Col>
								<Col>
									<Form.Item name={"keyword2"}>
										<Input placeholder="请输入后缀" maxLength={30} />
									</Form.Item>
								</Col>
								<Col>
									<Button type="primary" htmlType="submit">
										确定
									</Button>
								</Col>
							</Row>
						</Form>
					)
				},
				{
					label: `批量替换`,
					key: "批量替换",
					children: (
						<Form
							className="views-search-form"
							key="SearchFormSwitch"
							form={form}
							layout="horizontal"
							onFinish={e => onFinish("批量替换", e)}
						>
							<Row gutter={16}>
								<Col>
									<Form.Item name={"keyword1"} rules={[{ required: true, message: "不能为空" }]}>
										<Input placeholder="请输入关键词" maxLength={10} />
									</Form.Item>
								</Col>
								<Col>替换为</Col>
								<Col>
									<Form.Item name={"keyword2"} rules={[{ required: true, message: "不能为空" }]}>
										<Input placeholder="请输入关键词" maxLength={10} />
									</Form.Item>
								</Col>
								<Col>
									<Button type="primary" htmlType="submit">
										确定
									</Button>
								</Col>
							</Row>
						</Form>
					)
				},
				{
					label: `批量删除`,
					key: "批量删除",
					children: (
						<Form
							className="views-search-form"
							key="SearchFormDelete"
							form={form}
							layout="horizontal"
							onFinish={e => onFinish("批量删除", e)}
						>
							<Row gutter={16}>
								<Col>
									<Form.Item name={"keyword1"} rules={[{ required: true, message: "不能为空" }]}>
										<Input placeholder="请输入关键词" />
									</Form.Item>
								</Col>

								<Col>
									<Button type="primary" htmlType="submit">
										确定
									</Button>
								</Col>

								<Col>
									<Button type="default" onClick={() => onFinish("全部删除", form.getFieldsValue())}>
										全部删除
									</Button>
								</Col>
							</Row>
						</Form>
					)
				}
			]}
		/>
	);
};
